<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<center>
    <h4>新增学生数据</h4>
    <form action="#" method="post">
        姓名:<input type="text" name="name" id="name"> <br>
        密码：<input type="password" name="password" id="password"> <br>
        <input type="button" id="btn" value="提交">
    </form>
</center>

<!--axios-->
<script src="js/axios-0.18.0.js"></script>
<script>
    //当点击提交将内容提交到服务器处理
    document.querySelector("#btn").onclick=function () {

        //定义js对象  空的
        var studentFormData={
            name:"",//name
            password:""//password
        }

        //通过js获取表单中的数据赋值给对象的属性
        let name = document.querySelector("#name").value;
        studentFormData.name=name;

        let password = document.querySelector("#password").value;
        studentFormData.password=password;

        console.log(studentFormData);


        //发送ajax请求给服务器
        axios({
            method:"post",
            url:"http://localhost:8080/javaweb10/insertStu",
            data:studentFormData //js||json对象会自动转为字符串
        }).then(function (resp) {
            console.log(resp.data);
            if(resp.data  == "success"){
                alert("新增"+studentFormData.name+"成功！");
                //新增成功 跳转到查询全部的页面  (数据中有就会显示)
                location.href="http://localhost:8080/javaweb10/5.查询数据测试.html";
            }else{
                alert("内部错误，稍后重试!")
            }
        });
    }


</script>

</body>
</html>


